var Layout = Backbone.View.extend({
	el : $(".body"),
	initialize : function() {
		this.blocks = {};
		this.blockList = [];
		this.screenMapping = {};
		this.grids = []
		this.render();
		this.currentGrid = this.grids[0];
		// this.on('zoom', this.zoom, this);

	},
	render : function() {
		var t = this;
		this.itemCount = 4, i = 0;
		var screen_text = "<div class='screen'></div>";
		this.$el.append(screen_text);
		var scr = $('.screen', this.$el);

		this.collection.each(function(model, index) {
			if (~~(index / t.itemCount) > i) {
				t.$el.append(screen_text);
				scr = $('.screen:last', t.$el).hide();
				i++;

			}

			var b = new Block({
				el : scr,
				model : model
			});
			t.blocks[model.get('title')] = b;
			t.blockList.push(b);
			t.screenMapping[model.get('title')] = i;
			b.block.attr('name', model.get('title'));
			//scr.append(b.$el);
			if (index % t.itemCount == t.itemCount - 1 || index == t.itemCount - 1) {
				var g = t.makeGrid(scr[0]);
			}
		});
		return this;
	},
	makeGrid : function(el) {
		var grid = new ZoomGrid({
			container : el,
			columns : 2,
			foldedSize : {
				width : 100,
				height : 75
			},
			paddingMarginBorder : {
				width : 15,
				height : 15
			},
			zoomOnHover: false
		});
		
		// $('.panel-body', el).height(
		// 	$(grid.cells[0]).height() - $('.panel-header',grid.cells[0]).height() - 20)
		this.grids.push(grid);
		while (this.blockList.length > 0) {
			this.blockList.pop().inGrid(grid);
		}
		return grid;
	},
	setBodyHeight: function(){
		
	},
	zoom : function(name) {
		this.grids[this.screenMapping[name]].zoom(b.el);
	},
	addSubViewAction : function(name, options) {
		var b = this.blocks[name];
		b.addViewAction(options);
	}
}); 